<template>
  <div class="app-container">
    <div class="title">
      {{ form.projectName }} - 设置项目小组
    </div>
    <div class="title1">
      管理岗设置
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px" size="mini"></el-form>
    <el-row>
      <el-col :span="4">
        <el-input v-model="form.staffName" :disabled="true" placeholder="">
          <template slot="prepend">片区经理</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="padding-top: 20px;">
      <el-col :span="12">
        <el-table :data="form.manageList" border style="width: 100%">
          <el-table-column align="center" label="职务" prop="projectDuitsName" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.projectDuitsName" placeholder="请选择">
                <el-option v-for="dict in dict.type.cld_project_duits" :key="dict.value" :label="dict.label"
                           :value="parseInt(dict.value)"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="岗位" prop="projectPostName" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.projectPostName" disabled="true" placeholder="请选择">
                <el-option v-for="dict in dict.type.cld_project_post" :key="dict.value" :label="dict.label"
                           :value="parseInt(dict.value)"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="班次" prop="classesId">
            <template slot-scope="scope">
              <el-select v-model="scope.row.classesId" placeholder="请选择">
                <el-option v-for="dict in classesList" :key="dict.classesId" :label="dict.classesName"
                           :value="parseInt(dict.classesId)"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="职别" prop="jobName"/>
          <el-table-column align="center" label="姓名" prop="staffName">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.staffId && !scope.row.isAdd" plain size="mini" type="primary"
                         @click="handleAddStaff(scope.row)">
                {{ !scope.row.staffName ? '选择' : scope.row.staffName }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否通班" prop="isClass" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.isClass" placeholder="请选择">
                <el-option  label="是"
                            :value="1"></el-option>
                <el-option  label="否"
                            :value="0"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleSava(scope.row)">保存</el-button>
              <el-button size="mini" type="text" @click="handleClear(scope.row, 1)">清空</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="title1" style="padding-top: 20px;">
      设置小组
    </div>
    <el-row v-for="item in form.groupList" :key="item.projectPostId" style="padding-top: 20px;">
      <el-col :span="14">
        <el-table :data="item.list" border style="width: 100%">
          <el-table-column align="center" label="小组名称" prop="groupName" width="180">
            <el-select v-model="item.groupName" :disabled="true" placeholder="请选择">
              <el-option v-for="dict in dict.type.cld_project_groups" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-table-column>
          <el-table-column align="center" label="职务" prop="projectDuitsName" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.projectDuitsName" placeholder="请选择">
                <el-option v-for="dict in dict.type.cld_project_duits" :key="dict.value" :label="dict.label" v-if="dict.value != 1"
                           :value="parseInt(dict.value)"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="岗位" prop="projectPostName" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.projectPostName" placeholder="请选择">
                <el-option v-for="dict in dict.type.cld_project_post" v-show="dict.value != 1" :key="dict.value"
                           :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="班次" prop="classesId">
            <template slot-scope="scope">
              <el-select v-model="scope.row.classesId" placeholder="请选择">
                <el-option v-for="dict in classesList" :key="dict.classesId" :label="dict.classesName"
                           :value="parseInt(dict.classesId)"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="职别" prop="jobName"/>
          <el-table-column align="center" label="姓名" prop="staffName">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.staffId && !scope.row.isAdd" plain size="mini" type="primary"
                         @click="handleAddStaff(scope.row)">
                {{ !scope.row.staffName ? '选择' : scope.row.staffName }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否通班" prop="isClass" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.isClass" placeholder="请选择">
                <el-option  label="是"
                            :value="1"></el-option>
                <el-option  label="否"
                            :value="0"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleSava(scope.row)">保存</el-button>
              <el-button size="mini" type="text" @click="handleClear(scope.row, 2)">清空</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="dialog-footer-options">
      <!-- <el-button type="primary" @click="submit">保 存</el-button> -->
      <el-button @click="cancel">关 闭</el-button>
    </div>
    <!-- 选择人员 -->
    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isStaffOpen" append-to-body title="选择人员"
               width="70%">
      <SelectedStaff v-if="isStaffOpen" :isProject="false" :params="{ isSetGroupProjectId: projectId }"
                     @childInput="handleSelectedStaff">
      </SelectedStaff>
    </el-dialog>
  </div>


</template>

<script>
import {getSet} from "@/api/cld/set";
import {getClassesList} from "@/api/cld/classes";
import SelectedStaff from '@/views/cld/staff/selectedStaff';
import {addPost, updatePostInfo} from "@/api/cld/post";

export default {
  name: "addGroup",
  components: {
    SelectedStaff
  },
  dicts: ['cld_project_duits', 'cld_project_post', 'cld_project_groups'],
  data() {
    return {
      // 遮罩层
      loading: true,
      form: {
        manageList: [],
        groupList: []
      },
      // 人员弹框
      isStaffOpen: false,
      notStaffIds: [],
      projectPostId: 0,
      // 项目id
      projectId: null,
      classesList: [],
      postRow: [],
    };
  },
  created() {
    const projectId = this.$route.params && this.$route.params.projectId;
    if (projectId) {
      this.projectId = projectId;
      this.getGroupByProjectId();
      this.getClassesList();
    }
  },
  methods: {
    // 根据项目id查询项目岗位列表信息 需带出项目名称
    // 分组  项目岗位表中小组id为空则为管理岗
    getGroupByProjectId() {
      getSet(this.projectId).then(res => {
        this.form = res.data;
      })
    },
    handleSelectedStaff(data) {
      this.$set(this.postRow, "staffName", data.staffName);
      this.$set(this.postRow, "staffId", data.staffId)
      this.$set(this.postRow, "jobName", data.jobName)
      this.$set(this.postRow, "isAdd", 1)
      this.isStaffOpen = false;
    },
    // 选择员工
    handleAddStaff(row) {
      this.projectPostId = row.projectPostId;
      this.postRow = row;
      // 筛选已选择人员
      let notStaffIds = [];

      // this.form.groupList.forEach(i => {
      //   let ids = i.list.map(item => item.staffId);
      //   notStaffIds = notStaffIds.concat(ids);
      // })
      // this.notStaffIds = notStaffIds.filter(item => item);
      this.isStaffOpen = true;
    },
    // 清空选项
    handleClear(row, type) {
      row.staffId = null;
      row.staffName = null;
      row.jobName = null;
      row.isClass = 0;
    },
    getClassesList() {
      getClassesList().then(res => {
        this.classesList = res.data;
      })
    },
    // 单项保存
    handleSava(row) {
      row.isAdd = null;
      updatePostInfo(row).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.$emit('success');
      });
    },
    // 保存
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '数据提交中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          if (this.form.projectId != null) {
            addPost(this.form).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.$emit('success');
              loading.close();
            }).catch(() => {
              loading.close();
            });
          } else {
            loading.close();
          }
        }
      });
    },
    // 关闭
    cancel() {
      this.$tab.closePage();
    }
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.title {
  font-size: 26px;
  padding-left: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.title1 {
  font-size: 18px;
  padding-left: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
.dialog-footer-options{
  position: relative !important;
}

::v-deep .el-button--primary.is-plain.is-disabled{
  color: #6c9f1e;
}
</style>
